﻿<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>天气</title>
		<link rel="stylesheet" type="text/css" href="preview/css/reset.css" />
		<style type="text/css">
			.serviceTime {
				width: 3rem;
				height: .58rem;
			}
			
			.place {
				padding-right: .15rem;
				line-height: .58rem;
				font-size: .3rem;
			}
			
			.right p {
				line-height: .29rem;
				font-size: .18rem;
			}
		</style>
	</head>

	<body>
		<div class="serviceTime">
			<div class="wrap">
				<!--城市-->
				<div class="place fl">南京</div>
				<div class="right fl">
					<!--天气-->
					<p class="weather"></p>
					<!--温度-->
					<p class="temperature"></p>
				</div>
			</div>
		</div>
	</body>
	<script src="preview/js/jquery.min.js"></script>
	<script src="preview/js/rem.js"></script>
	<script>
		window.onresize = function() {
			getRem(100, 300);
		};
		var place = null, //地点
			countTimer = null,
			countNum = 0; //计数
		function count() {
			//每次清空上一个定时器
			if(!!window.countTimer) cancelAnimationFrame(window.countTimer);
			countNum++;
			//一小时请求一次 requestAnimationFrame方法一秒默认在谷歌浏览器执行60次
			if(countNum >= 216000) {
				countNum = 0;
				getweather();
			}
			//开启定时器
			window.countTimer = requestAnimationFrame(count);
		}

		function getweather() {
			$.ajax({
				url: "http://wthrcdn.etouch.cn/weather_mini",
				type: "get",
				data: {
					city: place
				},
				/*预期服务器端返回的数据类型，假设我现在跨域了，我就改成jsonp 就可以了 */
				dataType: "jsonp",
				success: function(data) {
					var d = data.data.forecast[0],
						weather = d.type + " " + d.fengxiang,
						high = d.high.split(" ")[1],
						low = d.low.split(" ")[1];
					$(".place").text(place);
					$(".weather").text(weather);
					$(".temperature").text(low + "/" + high);
				}
			});

		}
		window.onload = function() {
			getRem(100, 300);
			place = $(".place").text().trim();
			//天气
			getweather();
			count();
		}
	</script>

</html>